<!--提示框内容-->
<template>
  <view class="container">
    <view class="calendar" :style="`background: ${headerBg}`">
      <view
        :class="[
          'calendars-item',
          (item == '日' || item == '六') && 'color-red',
          'header-vertical-center',
        ]"
        :style="`background: ${headerItemBg};`"
        v-for="(item, index) in weekArr"
        :key="index"
      >
        {{ item }}
      </view>
    </view>
    <view class="calendars-month between-item-center-row">
      <!-- :style="`visibility: ${!canPickPrevDate && 'hidden'}`" -->
      <view class="switch-month" @tap="handleSwichMonth" :data-number="-1"
        >上一月</view
      >
      <view class="current-month">{{
        `${currentYear}年${currentMonth}月`
      }}</view>
      <view class="switch-month" @tap="handleSwichMonth" :data-number="1"
        >下一月</view
      >
    </view>
    <!--日历数据-->
    <view class="calendar">
      <view
        :class="[
          item.isCheck ? 'calendars-item-active' : 'calendars-item',
          item.disable && 'color-999',
        ]"
        v-for="(item, index) in newCalendarData"
        :key="index"
        :data-item="item"
        :data-idx="index"
        @tap="onTap"
      >
        <view
          :class="[
            'calendars-item-content',
            item.price ? 'flex-end' : 'flex-center',
          ]"
        >
          <view
            v-show="showHoliday"
            :class="['f-size', item.isCheck ? 'color-white' : 'color-blue']"
            >元旦</view
          >
          <view :class="[((index % 7 == 0 || (index + 1) % 7 == 0) && !item.isCheck) && 'color-red']">{{ item.date }}</view>
          <view
            v-if="item.price"
            :class="[item.isCheck ? 'price-active' : 'price']"
            >¥{{ item.price }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>
<script src="./indexMod.js"></script>
<style src="./indexStyle.scss"></style>
